<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">

      form div {
          height: 40px;
          line-height: 40px;
      }

      form div:nth-child(4) {
          height: auto;
      }

      form div span:first-child {
          display: inline-block;
          width: 100px;
      }
  </style>
</head>
<body>
  <div id="app">
    <form action="http://itcast.cn">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model="uname">
        </span>
      </div>
      <div>
        <span>性别：</span>
        <span>
          <!-- 表单里面内容-->
          <input id="male" type="radio" v-model="gender" value="1">
          <label for="male">男</label>
          <input id="female" type="radio" v-model="gender" value="2">
          <label for="female">女</label>
        </span>
      </div>
      <div>
        <span>爱好：</span>
        <input id="ball" type="checkbox" v-model="hobby" value="1">
        <label for="ball">篮球</label>
        <input id="sing" type="checkbox" v-model="hobby" value="2">
        <label for="sing">唱歌</label>
        <input id="code" type="checkbox" v-model="hobby" value="3">
        <label for="code">写代码</label>
      </div>
      <div>
        <span>职业：</span>
        <!-- multiple 实现select下拉框可以多选-->
        <select v-model='occupation'>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
        </select>
      </div>
      <div>
        <span>个人简介：</span>
        <textarea v-model="desc"></textarea>
      </div>
      <div>
        <input @click.prevent='handle' type="submit" value="提交">
      </div>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    /*
      表单基本操作
    */
    var vm = new Vue({
      el: '#app',
      data: {
        uname: 'lisi',
        gender: 2,
        hobby: ['2', '3'],
        occupation: 1,
        // occupation: ['2', '3'],
        desc: 'nihao'
      },
      methods: {
        handle: function () {
          // console.log(this.uname)
          console.log(`单选框type="radio"  ${this.gender}`)
          console.log(`多选框type="checkbox"  ${this.hobby}`)
          console.log(`下拉框select  ${this.occupation}`)
          console.log(this.desc)

        }
      }
    });
  </script>
</body>
</html>
